<template>
  <div class>
    <el-card class="ep-card ep-search">
      <el-form :model="searchForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="20">
              <el-form-item label="用户名称" size="small"> 
                <el-input v-model="searchForm.userName" placeholder="请输入用户名称" :clearable="true"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" size="small" icon="el-icon-search" @click="init">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-table :data="tableData" border style="width: 100%" size="mini">
      <!-- <el-table-column prop="logType" label="日志类型" align="center" width="80" :formatter="getLogTypeName">
      </el-table-column> -->
      <el-table-column prop="userName" label="用户名" align="center" width="100">
      </el-table-column>
      <el-table-column prop="funcId" label="功能ID" align="center" width="100">
      </el-table-column>
      <el-table-column prop="funcName" label="功能名称" align="center" width="120">
      </el-table-column>
      <el-table-column prop="content" label="日志内容" align="center" width="120">
      </el-table-column>
      <el-table-column prop="createTime" label="创建日期" align="center" width="140" :formatter="dateFormatter">
      </el-table-column>
      <el-table-column prop="version" align="center" label="版本号">
      </el-table-column>
      <el-table-column prop="tabName" align="center" label="表名称">
        <template slot-scope="scope">
          <div :title="scope.row.tabName" class="overFlow">{{scope.row.tabName}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="beforeChange" align="center" label="之前" width="120">
        <template slot-scope="scope">
          <div :title="scope.row.beforeChange" class="overFlow">{{scope.row.beforeChange}}</div>
        </template>
      </el-table-column>   
      <el-table-column prop="afterChange" align="center" label="之后" width="120">
        <template slot-scope="scope">
          <div :title="scope.row.afterChange" class="overFlow">{{scope.row.afterChange}}</div>
        </template>
      </el-table-column> 
      <el-table-column label="操作" width="80x" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="showLogDialog(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-card style="text-align:right;">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage" :page-sizes="[ 10, 20,30, 40]" :page-size="pageSize" background layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
    </el-card>

    <!-- --------------------------------------------------------查看 -->
    <el-dialog class="myDialog" title="变更日志信息" :visible.sync="dialogLogVisible" :close-on-click-modal="false" width="500px">
      <el-form>
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="logForm.userName" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item label="功能ID" :label-width="formLabelWidth">
        <el-input v-model="logForm.funcId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="功能名称" :label-width="formLabelWidth">
          <el-input v-model="logForm.funcName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="版本号" :label-width="formLabelWidth">
          <el-input v-model="logForm.version" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="表名称" :label-width="formLabelWidth">
          <el-input v-model="logForm.tabName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日志内容" :label-width="formLabelWidth">
        <el-input type="textarea" rows="3" v-model="logForm.content" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="之前" :label-width="formLabelWidth">
          <el-input type="textarea" rows="3" v-model="logForm.beforeChange" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="之后" :label-width="formLabelWidth">
          <el-input type="textarea" rows="3" v-model="logForm.afterChange" autocomplete="off"></el-input>
        </el-form-item>
          
        
        <el-form-item label="创建时间" :label-width="formLabelWidth">
          <el-input v-model="logForm.createTime" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
      
<script>
import {getLogTypeName,dateFormatter} from "@/pages/log/function.js";
export default {
components: {},
data() {
  return {
    logForm: {},
    formLabelWidth: '100px',
    dialogLogVisible: false,
    total: 0,
    pageSize: 10,
    currentPage: 1,
    tableData: [],
    searchForm: {
              userName: '',
              status: '',
    },
  };
},
computed: {},
mounted() {
  this.init();
},
methods: {
  showLogDialog(index, row) {
      this.logForm = {};
      this.logForm.userName = row.userName;

      this.logForm.funcId = row.funcId;
      this.logForm.funcName = row.funcName;
      this.logForm.content = row.content;
      this.logForm.version = row.version;
      this.logForm.tabName = row.tabName;
      this.logForm.content = row.content;
      this.logForm.beforeChange = row.beforeChange;
      this.logForm.afterChange = row.afterChange;
      let col = {};
      col.property = 'createTime';
      this.logForm.createTime = this.dateFormatter(row, col);
      this.dialogLogVisible = true;
    },
  getLogTypeName(row, column) {
    return getLogTypeName(row, column);
  },
  dateFormatter(row, column) {
    return dateFormatter(row, column);
  },
  sizeChange(pageSize) {
    this.pageSize = pageSize;
    this.init();
  },
  currentChange(currentPage) {
    this.currentPage = currentPage;
    this.init();
  },
  init() {
    let params = {
      pageNum: this.currentPage,
      pageSize: this.pageSize,
      userName: this.searchForm.userName,
      status: this.searchForm.status,
       logType: '4',
    };
    this.$api.formPost( '/api/log/collect/doGetList2', params)
      .then(res => {
        if (res.retHead.code === "0000000") {
          this.tableData = res.retBody.list;
          this.total = res.retBody.total;
        }
      });
  }
},
created() {}
};
</script>
<style lang='scss' scoped>
.overFlow {
  max-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-input {
  width: 189px;
}

.myDialog .el-input {
  width: 100%;
}
</style>